<template>
  <div ref="order" class="order" />
</template>

<script>
import * as echarts from 'echarts/core'
import {
  LineChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
)
export default {
  name: 'Order',
  mounted() {
    var myChart = echarts.init(this.$refs.order)
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      color: ['#1890ff'],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisTick: { show: false },
        data: ['10-23周日', '', '10-24周一', '', '10-25周二', '', '10-26周三', '', '10-27周四', '', '10-28周五', '', '10-29周六', '']
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [{
        name: '订单数',
        data: [39, 39, 26, 35, 45, 40, 59, 50, 36, 38, 14, 19, 13, 28],
        type: 'line',
        smooth: true,
        areaStyle: {
          color: '#E8F4FF'
        }
      }]
    })
  }
}
</script>

<style lang="scss" scoped>
.order {
  height: 100%;
  width: 100%;
}
</style>
